<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body th:fragment="tooth_type">
<div class="main-tab">
    <div class="max-width">
        <ul class="main-tab-ul">
            <li><a href="/consult/main" target="_self">今日推荐</a></li>
            <!--th:class="${type == '0'}?'main-tab-active':''"-->
            <li th:each="var,i : ${typeList}" th:if="${i.index} < 10" th:class="${var.tid == article.tid}?'main-tab-active':'' ">
                <a th:href="@{'/consult/type/?type='+${var.tid}}" th:text="${var.name}" target="_self">美白</a>
            </li>
            <li class="tab-more-list">
                <a href="javascript:;" target="_self">
                    <span>更多</span>
                    <img class="arrow-bottom" src="/icon/arrow-bttom.png" alt="有贝口腔网">
                </a>
                <div>
                    <ul>
                        <li th:each="var,i : ${typeList}" th:if="${i.index} >= 10">
                            <a th:href="@{'/consult/type/?type='+${var.tid}}" target="_self" th:text="${var.name}">龅牙</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>

        <!-- 移动端 -->
        <div class="main-tab-box">
            <div class="main-tab-div">
                <ul class="main-tab-phone">
                    <li class="main-tab-active"><a href="http://www.hasbei.com/qa">热门</a></li>
                    <li><a href="http://www.hasbei.com/qa/5" target="_self">美白</a></li>
                    <li><a href="http://www.hasbei.com/qa/1" target="_self">矫正</a></li>
                    <li><a href="http://www.hasbei.com/qa/10" target="_self">种植牙</a></li>
                    <li><a href="http://www.hasbei.com/qa/3" target="_self">溃疡</a></li>
                    <li><a href="http://www.hasbei.com/qa/2" target="_self">牙疼</a></li>
                    <li><a href="http://www.hasbei.com/qa/6" target="_self">拔牙</a></li>
                    <li><a href="http://www.hasbei.com/qa/8" target="_self">龋齿</a></li>
                    <li><a href="http://www.hasbei.com/qa/12" target="_self">洗牙</a></li>
                    <li><a href="http://www.hasbei.com/qa/9" target="_self">补牙</a></li>
                    <li><a href="http://www.hasbei.com/qa/4" target="_self">牙周炎</a></li>
                    <li><a href="http://www.hasbei.com/qa/11" target="_self">龅牙</a></li>
                    <li><a href="http://www.hasbei.com/qa/13" target="_self">综合口腔</a></li>
                </ul>
                <div class="more-list">
                    <span>更多</span>
                    <img class="arrow-bottom" src="/icon/arrow-bttom.png" alt="有贝口腔网">
                </div>
            </div>
            <ul class="more-list-ul">




                <li><a href="http://www.hasbei.com/qa/2" target="_self">牙疼</a></li>
                <li><a href="http://www.hasbei.com/qa/6" target="_self">拔牙</a></li>
                <li><a href="http://www.hasbei.com/qa/8" target="_self">龋齿</a></li>
                <li><a href="http://www.hasbei.com/qa/12" target="_self">洗牙</a></li>
                <li><a href="http://www.hasbei.com/qa/9" target="_self">补牙</a></li>
                <li><a href="http://www.hasbei.com/qa/4" target="_self">牙周炎</a></li>
                <li><a href="http://www.hasbei.com/qa/11" target="_self">龅牙</a></li>
                <li><a href="http://www.hasbei.com/qa/13" target="_self">综合口腔</a></li>
            </ul>
        </div>

    </div>
</div>
</body>
</html>